<template>
  <div class="pie-chart-demo">
    <el-card class="demo-header">
      <template #header>
        <h2>🎨 饼状图组件测试示例</h2>
      </template>
    </el-card>

    <el-row :gutter="20">
      <!-- 基础饼图 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>基础饼图</span>
              <el-tag>默认配置</el-tag>
            </div>
          </template>
          <Donut
            title="销售额分布"
            :data="basicData"
          />
        </el-card>
      </el-col>

      <!-- 环形图 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>环形图（带标签）</span>
              <el-tag type="success">show-label</el-tag>
            </div>
          </template>
          <Donut
            title="市场份额占比"
            :data="marketData"
            :show-label="true"
            :is-donut="true"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 自定义颜色 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>自定义颜色主题</span>
              <el-tag type="warning">渐变色</el-tag>
            </div>
          </template>
          <Donut
            title="产品分类统计"
            :data="categoryData"
            :colors="gradientColors"
            legend-position="bottom"
          />
        </el-card>
      </el-col>

      <!-- 完整饼图 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>完整饼图</span>
              <el-tag type="danger">非环形</el-tag>
            </div>
          </template>
          <Donut
            title="客户满意度"
            :data="satisfactionData"
            :is-donut="false"
            :show-label="true"
            legend-position="right"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 动态数据 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>动态数据更新</span>
              <el-button size="small" type="primary" @click="updateDynamicData">
                刷新数据
              </el-button>
            </div>
          </template>
          <Donut
            title="实时销售数据"
            :data="dynamicData"
            :colors="techColors"
            height="400px"
          />
        </el-card>
      </el-col>

      <!-- 大数据量 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>多数据项展示</span>
              <el-tag type="info">可滚动图例</el-tag>
            </div>
          </template>
          <Donut
            title="区域销售分布"
            :data="regionData"
            legend-position="right"
            height="400px"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 商务主题 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>商务主题配色</span>
              <el-tag type="success">专业风格</el-tag>
            </div>
          </template>
          <Donut
            title="收支结构分析"
            :data="financeData"
            :colors="businessColors"
            :radius="['35%', '65%']"
            legend-position="bottom"
          />
        </el-card>
      </el-col>

      <!-- 自定义尺寸 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>自定义高度与半径</span>
              <el-tag type="warning">500px高</el-tag>
            </div>
          </template>
          <Donut
            title="年度目标完成情况"
            :data="targetData"
            :colors="freshColors"
            :radius="['40%', '75%']"
            height="500px"
            :show-label="true"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 配置说明 -->
    <el-card style="margin-top: 20px">
      <template #header>
        <h3>📖 配置说明</h3>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="基础饼图">使用默认配置，简单快捷</el-descriptions-item>
        <el-descriptions-item label="环形图">设置 is-donut="true"（默认）</el-descriptions-item>
        <el-descriptions-item label="显示标签">设置 show-label="true"</el-descriptions-item>
        <el-descriptions-item label="图例位置">legend-position: top/bottom/left/right</el-descriptions-item>
        <el-descriptions-item label="自定义颜色">传入 colors 数组</el-descriptions-item>
        <el-descriptions-item label="图表高度">height 属性（默认350px）</el-descriptions-item>
        <el-descriptions-item label="饼图半径">radius 数组，如 ['40%', '70%']</el-descriptions-item>
        <el-descriptions-item label="动态数据">支持 data 属性响应式更新</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 性能指标 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <el-card>
          <el-statistic title="组件实例" :value="8">
            <template #suffix>个</template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <el-statistic title="响应式自适应" :value="100">
            <template #suffix>%</template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <el-statistic title="渲染性能" value="优秀">
            <template #prefix>
              <el-icon color="green"><SuccessFilled /></el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Donut from '@/components/echarts/Donut.vue'
import { SuccessFilled } from '@element-plus/icons-vue'

// 基础数据
const basicData = ref([
  { name: '华东地区', value: 3580 },
  { name: '华南地区', value: 2890 },
  { name: '华北地区', value: 2360 },
  { name: '西南地区', value: 1850 },
  { name: '东北地区', value: 1280 }
])

// 市场数据
const marketData = ref([
  { name: '公司A', value: 35.5 },
  { name: '公司B', value: 28.3 },
  { name: '公司C', value: 19.8 },
  { name: '公司D', value: 11.2 },
  { name: '其他', value: 5.2 }
])

// 分类数据
const categoryData = ref([
  { name: '电子产品', value: 4200 },
  { name: '服装鞋包', value: 3800 },
  { name: '食品饮料', value: 3200 },
  { name: '家居用品', value: 2600 },
  { name: '图书音像', value: 1800 }
])

// 满意度数据
const satisfactionData = ref([
  { name: '非常满意', value: 45 },
  { name: '满意', value: 35 },
  { name: '一般', value: 15 },
  { name: '不满意', value: 5 }
])

// 动态数据
const dynamicData = ref([
  { name: '产品A', value: 1200 },
  { name: '产品B', value: 980 },
  { name: '产品C', value: 850 },
  { name: '产品D', value: 720 }
])

// 区域数据
const regionData = ref([
  { name: '北京', value: 1580 },
  { name: '上海', value: 1420 },
  { name: '广州', value: 1280 },
  { name: '深圳', value: 1150 },
  { name: '杭州', value: 980 },
  { name: '成都', value: 860 },
  { name: '武汉', value: 750 },
  { name: '西安', value: 680 },
  { name: '南京', value: 620 },
  { name: '重庆', value: 580 },
  { name: '天津', value: 520 },
  { name: '青岛', value: 480 }
])

// 财务数据
const financeData = ref([
  { name: '运营成本', value: 3200 },
  { name: '营销费用', value: 2800 },
  { name: '研发投入', value: 2400 },
  { name: '人力成本', value: 2000 },
  { name: '其他支出', value: 1200 }
])

// 目标数据
const targetData = ref([
  { name: '已完成', value: 75 },
  { name: '进行中', value: 20 },
  { name: '未开始', value: 5 }
])

// 渐变色主题
const gradientColors = [
  '#667eea',
  '#764ba2',
  '#f093fb',
  '#4facfe',
  '#00f2fe',
  '#43e97b',
  '#38f9d7',
  '#fa709a',
  '#fee140'
]

// 科技主题
const techColors = [
  '#0066FF',
  '#0099FF',
  '#00CCFF',
  '#6666FF',
  '#9999FF',
  '#CCCCFF'
]

// 商务主题
const businessColors = [
  '#2C3E50',
  '#34495E',
  '#7F8C8D',
  '#3498DB',
  '#5DADE2'
]

// 清新主题
const freshColors = [
  '#67C23A',
  '#E6A23C',
  '#F56C6C'
]

// 更新动态数据
const updateDynamicData = () => {
  dynamicData.value = [
    { name: '产品A', value: Math.floor(Math.random() * 2000) + 500 },
    { name: '产品B', value: Math.floor(Math.random() * 2000) + 500 },
    { name: '产品C', value: Math.floor(Math.random() * 2000) + 500 },
    { name: '产品D', value: Math.floor(Math.random() * 2000) + 500 }
  ]
}
</script>

<style scoped lang="scss">
.pie-chart-demo {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .demo-header {
    margin-bottom: 20px;

    h2 {
      margin: 0;
      color: #303133;
      font-size: 24px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-weight: bold;
      font-size: 16px;
    }
  }

  :deep(.el-card) {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
    }
  }

  :deep(.el-statistic) {
    text-align: center;
  }

  :deep(.el-descriptions) {
    .el-descriptions__label {
      font-weight: bold;
      color: #606266;
    }
  }
}
</style>

